<template>
	<view>
		<TopNavCustom title="个人信息"></TopNavCustom>
		<view class="container">
			<u-modal :content="content" :show="show5" showCancelButton buttonReverse @confirm="comfirm"
				@cancel="() => (show5 = false)"></u-modal>
			<view class="card">
				<u-cell-group>
					<u-cell title="头像" :rightIconStyle="iconStyle" size="large">
						<block slot="right-icon">
							<u-upload @afterRead="afterRead"name="1" :maxCount="1"
								:previewFullImage="false" class="uploadAvator">
								<u-avatar :src="avator" size="60" class="avator"></u-avatar>
							</u-upload>
						</block>
					</u-cell>
					<u-cell title="昵称" :value="userName" size="large" @click="
              goto(
                '/pages/imine/mine_user_change_username/mine_user_change_username'
              )
            "></u-cell>
					<u-cell title="用户ID" size="large">
						<div slot="value" class="id-over">
							{{ userId }}
						</div>
					</u-cell>
					<u-cell title="手机号" :value="phone" size="large"></u-cell>
					<!-- @click="goto('/pages/imine/imine_change_phone/imine_change_phone')" -->
				</u-cell-group>
			</view>
			<button @click=" exit()" class="btn">退出登录</button>
		</view>
	</view>
</template>

<script>
	import $C from "@/common/config.js";
	import store from "@/store/store.js";
	import _file from "@/common/file.js"
	import _user from "@/common/user.js"
	export default {
		data() {
			return {
				iconStyle: {
					width: "40rpx",
					height: "40rpx",
				},
				avator: "",
				content: "是否确认退出登录？",
				show5: false,
				phone: uni.getStorageSync("phone"),
				avatorUrl: null,
				userName: uni.getStorageSync("userName"),
				userId: uni.getStorageSync("userId"),
			};
		},
		onLoad() {
			this.userName = uni.getStorageSync("userName");
			console.log(uni.getStorageSync("headerUrl"))
			if (typeof uni.getStorageSync("headerUrl") != undefined) {
				this.avator =
					$C.baseUrl +
					"/file/download?fileId=" +
					uni.getStorageSync("headerUrl");
			}
			if (typeof uni.getStorageSync("phone") != undefined) {
				this.phone = uni.getStorageSync("phone")
			}
		},
		methods: {
			async comfirm() {
				// uni.removeStorageSync("phone");
				// // uni.removeStorageSync("userId", "-");
				// uni.removeStorageSync("headerUrl");
				// uni.removeStorageSync("userName");
				// uni.removeStorageSync("password");
				// uni.removeStorageSync('selectedProject')
				// uni.removeStorageSync('estateId')
				// uni.setStorageSync("roleId", "0");
				// uni.removeStorageSync("wxId");
				this.show5 = false;
				// uni.switchTab({
				// 	url: "/pages/imine/mine/mine",
				// });
				let result = await _user.loginOut()
				if (result) {
					this.show5 = false;
				} else{
					
				}
			},
			exit() {
				this.show5 = true;
			},
			goto(url) {
				uni.navigateTo({
					url: url,
				});
			},
			async afterRead(event) {
				const result = await _file.uploadFilePromise(event.file.url);
				const temp = JSON.parse(result);
				store.dispatch("user/setAVATOR", temp.body.fileId);
				this.avator =
					$C.baseUrl + "/file/download?fileId=" + temp.body.fileId;
				this.updateInfo(temp.body.fileId);
			},
			async updateInfo(url) {
				const info = {};
				info.headerUrl = url;
				info.phone = uni.getStorageSync("phone");
				info.userId = uni.getStorageSync("userId");
				info.userName = uni.getStorageSync("userName");
				info.wxId = uni.getStorageSync("openId");
				const {
					body
				} = uni.$H.post("/user/updateUserInfo", info, {
					authCode: true,
				});
				uni.setStorageSync("headerUrl", url);
			},
		},
	};
</script>

<style lang="scss">
	.container {
		padding: 20rpx 30rpx 0 30rpx;

		.card {
			border-radius: 20rpx;
			border: 1rpx solid #efefef;
		}

		.btn {
			position: absolute;
			bottom: 82rpx;
			width: 650rpx;
			background: linear-gradient(90deg, #e62129 0%, #ba000a 100%);
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
			color: #ffffff;
		}
	}

	.id-over {
		font-size: 28rpx;
		width: 300rpx;
		overflow: hidden;
		/* #ifndef APP-NVUE */
		white-space: nowrap;
		text-overflow: ellipsis;
		/* #endif */
		/* #ifdef APP-NVUE */
		lines: 1;
		text-overflow: ellipsis;
		/* #endif */
	}
</style>
